<template>
  <view class="container">
    <!-- 顶部信息栏 -->
    <view class="header-card">
      <view class="header">
        <text class="title">数据监控</text>
      </view>
    </view>

    <!-- 日数据统计 -->
    <view class="section-card">
      <view class="card-header">
        <view class="header-left">
          <text class="title">每日数据</text>
        </view>
        <view class="header-right">
          <view class="data-type-selector">
            <uni-data-select
              v-model="selectedDataType"
              :localdata="dataTypes"
              @change="onDataTypeChange"
            />
          </view>
          <view class="date-picker">
            <uni-datetime-picker
              type="date"
              :value="currentDate"
              :end="today"
              :start="lastWeek"
              @change="onDateChange" />
          </view>
        </view>
      </view>
      <view class="chart-container">
        <view class="echart" id="day-chart"></view>
      </view>
    </view>

    <!-- 周数据统计 -->
    <view class="section-card">
      <view class="card-header">
        <view class="header-left">
          <text class="title">每周数据</text>
        </view>
      </view>
      <view class="chart-container">
        <view class="echart" id="week-chart"></view>
      </view>
    </view>

    <!-- 月数据统计 -->
    <view class="section-card">
      <view class="card-header">
        <view class="header-left">
          <text class="title">每月数据</text>
        </view>
      </view>
      <view class="chart-container">
        <view class="echart" id="month-chart"></view>
      </view>
    </view>

    <!-- 报警通知 -->
    <view class="section-card">
      <view class="card-header">
        <view class="header-left">
          <text class="title">报警通知</text>
        </view>
        <text class="more">全部通知</text>
      </view>
      <view class="notification-list">
        <view class="notification-item" v-for="(alert, index) in alerts" :key="index">
          <view class="alert-icon" :class="alert.level">
            <uni-icons :type="alert.icon" size="24" :color="alert.color"></uni-icons>
          </view>
          <view class="alert-content">
            <view class="alert-header">
              <text class="alert-title">{{ alert.title }}</text>
              <text class="alert-time">{{ alert.betweenTime }}</text>
            </view>
            <text class="alert-desc">{{ alert.content }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'
import { listSensor } from "@/api/sensor/sensor"
import { getAlarmInfo } from "@/api/alarm/alarm"

export default {
  data() {
    const today = new Date()
    const lastWeek = new Date(today)
    lastWeek.setDate(lastWeek.getDate() - 6)

    return {
      currentDate: this.formatDate(today),
      today: this.formatDate(today),
      lastWeek: this.formatDate(lastWeek),
      timer: null,
      currentIndex: 0,
      dayChart: null,
      weekChart: null,
      monthChart: null,
      weekAnimationTimer: null,
      selectedDataType: 'temperature',
      dataTypes: [
        { value: 'temperature', text: '温度(°C)' },
        { value: 'humidity', text: '湿度(%)' },
        { value: 'soilN', text: '土壤氮含量(ppm)' },
        { value: 'soilP', text: '土壤磷含量(ppm)' },
        { value: 'soilK', text: '土壤钾含量(ppm)' }
      ],
      // 传感器数据
      sensorData: [],
      // 报警通知数据
      alerts: []
    }
  },
  mounted() {
    // 初始化时获取数据
    this.fetchSensorData()
    // 初始化图表
    this.initCharts()
    // 获取报警信息
    this.fetchAlarmInfo()
    // 设置定时刷新报警信息
    this.timer = setInterval(() => {
      this.fetchAlarmInfo()
    }, 60000) // 每分钟刷新一次
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.dayChart) {
      this.dayChart.dispose()
      this.dayChart = null
    }
    if (this.weekChart) {
      this.weekChart.dispose()
      this.weekChart = null
    }
    if (this.monthChart) {
      this.monthChart.dispose()
      this.monthChart = null
    }
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    // 获取报警信息
    async fetchAlarmInfo() {
      try {
        const res = await getAlarmInfo()
        if (res.code === 200) {
          if (res.data && res.data.length > 0) {
            this.alerts = res.data.map(item => ({
              ...item,
              level: this.getAlarmLevel(item.title),
              icon: 'error-filled',
              color: this.getAlarmColor(item.title)
            }))
          } else {
            this.alerts = [{
              title: '系统提示',
              content: '土壤状况良好，暂无任何警报',
              betweenTime: this.formatDate(new Date()),
              level: 'info',
              icon: 'checkmark',
              color: '#52c41a'
            }]
          }
        }
      } catch (error) {
        console.error('获取报警信息失败:', error)
      }
    },

    // 获取报警等级
    getAlarmLevel(title) {
      if (title.includes('温度') || title.includes('湿度')) {
        return 'warning'
      } else if (title.includes('离线')) {
        return 'error'
      }
      return 'info'
    },

    // 获取报警颜色
    getAlarmColor(title) {
      if (title.includes('温度') || title.includes('湿度')) {
        return '#ff4d4f'
      } else if (title.includes('离线')) {
        return '#ff4d4f'
      }
      return '#2979ff'
    },
    // 获取传感器数据
    async fetchSensorData() {
      try {
        // 获取今日数据，添加具体时间范围
        const todayStart = `${this.currentDate} 00:00:00`
        const todayEnd = `${this.currentDate} 23:59:59`
        const todayResponse = await listSensor({
          pageNum: 1,
          pageSize: 1000,
          startTime: todayStart,
          endTime: todayEnd
        })

        // 计算所选日期所在周的起止时间
        const selectedDate = new Date(this.currentDate)
        const dayOfWeek = selectedDate.getDay() // 0是周日，1-6是周一到周六
        const weekStart = new Date(selectedDate)
        const weekEnd = new Date(selectedDate)

        if (dayOfWeek === 0) { // 如果是周日
          weekStart.setDate(selectedDate.getDate() - 6) // 获取前6天
        } else {
          weekStart.setDate(selectedDate.getDate() - dayOfWeek + 1) // 获取本周一
          weekEnd.setDate(selectedDate.getDate() + (7 - dayOfWeek)) // 获取本周日
        }

        // 分别获取每一天的数据
        const weekData = []
        const currentDate = new Date(weekStart)
        while (currentDate <= weekEnd) {
          const dateStr = this.formatDate(currentDate)
          const dayStart = `${dateStr} 00:00:00`
          const dayEnd = `${dateStr} 23:59:59`
          const response = await listSensor({
            pageNum: 1,
            pageSize: 1000,
            startTime: dayStart,
            endTime: dayEnd
          })
          weekData.push(...response.rows)
          currentDate.setDate(currentDate.getDate() + 1)
        }

        // 合并数据，优先使用今日数据
        this.sensorData = [
          ...weekData.filter(item => {
            const itemDate = this.formatDate(new Date(item.timestamp))
            return itemDate !== this.currentDate
          }),
          ...todayResponse.rows
        ]

        // 更新所有图表
        this.updateDayChart()
        this.updateWeekChart()
        this.updateMonthChart()
      } catch (error) {
        console.error('获取传感器数据失败:', error)
      }
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 将日期格式化为小时
    formatHour(timestamp) {
      const date = new Date(timestamp)
      return date.getHours().toString().padStart(2, '0') + ':00'
    },
    // 获取某一天的数据
    getDayData(date) {
      const targetDate = new Date(date).setHours(0, 0, 0, 0)
      const dayData = this.sensorData.filter(item => {
        const itemDate = new Date(item.timestamp).setHours(0, 0, 0, 0)
        return itemDate === targetDate
      })

      // 按小时对数据进行分组
      const hourlyData = {}
      dayData.forEach(item => {
        const hour = new Date(item.timestamp).getHours()
        if (!hourlyData[hour]) {
          hourlyData[hour] = []
        }
        hourlyData[hour].push(item)
      })

      // 生成24小时的数据
      const categories = Array.from({length: 24}, (_, i) => `${String(i).padStart(2, '0')}:00`)
      const series = [
        {
          name: '温度(°C)',
          data: Array.from({length: 24}, (_, hour) => {
            const hourData = hourlyData[hour] || []
            return hourData.length ?
              hourData.reduce((sum, item) => sum + Number(item.temperature), 0) / hourData.length :
              null
          })
        },
        {
          name: '湿度(%)',
          data: Array.from({length: 24}, (_, hour) => {
            const hourData = hourlyData[hour] || []
            return hourData.length ?
              hourData.reduce((sum, item) => sum + Number(item.humidity), 0) / hourData.length :
              null
          })
        },
        {
          name: '土壤氮含量(ppm)',
          data: Array.from({length: 24}, (_, hour) => {
            const hourData = hourlyData[hour] || []
            return hourData.length ?
              hourData.reduce((sum, item) => sum + Number(item.soilN), 0) / hourData.length :
              null
          })
        },
        {
          name: '土壤磷含量(ppm)',
          data: Array.from({length: 24}, (_, hour) => {
            const hourData = hourlyData[hour] || []
            return hourData.length ?
              hourData.reduce((sum, item) => sum + Number(item.soilP), 0) / hourData.length :
              null
          })
        },
        {
          name: '土壤钾含量(ppm)',
          data: Array.from({length: 24}, (_, hour) => {
            const hourData = hourlyData[hour] || []
            return hourData.length ?
              hourData.reduce((sum, item) => sum + Number(item.soilK), 0) / hourData.length :
              null
          })
        }
      ]

      return { categories, series }
    },
    // 获取Y轴配置
    getYAxisConfig(dataType) {
      const configs = {
        temperature: { min: 0, max: 50, formatter: '{value}°C' },
        humidity: { min: 0, max: 100, formatter: '{value}%' },
        soilN: { min: 0, max: 2000, formatter: '{value}ppm' },
        soilP: { min: 0, max: 2000, formatter: '{value}ppm' },
        soilK: { min: 0, max: 2000, formatter: '{value}ppm' }
      }
      return configs[dataType]
    },
    // 获取系列颜色
    getSeriesColor(dataType) {
      const colors = {
        temperature: '#2979ff',
        humidity: '#00ff7f',
        soilN: '#ffa940',
        soilP: '#ff4d4f',
        soilK: '#722ed1'
      }
      return colors[dataType]
    },
    // 数据类型切换处理
    onDataTypeChange() {
      this.updateDayChart()
      this.updateWeekChart()
      this.updateMonthChart()
    },
    // 更新图表
    updateDayChart() {
      const dayData = this.getDayData(this.currentDate)
      const dataTypeConfig = this.dataTypes.find(type => type.value === this.selectedDataType)
      const yAxisConfig = this.getYAxisConfig(this.selectedDataType)
      const seriesColor = this.getSeriesColor(this.selectedDataType)

      // 获取选中数据类型的数据
      const seriesData = dayData.series.find(s => s.name === dataTypeConfig.text).data

      const option = {
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDelay: (idx) => idx * 100,
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        animationDelayUpdate: (idx) => idx * 100,
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return params[0].axisValue + '<br/>' +
              params[0].marker + dataTypeConfig.text + ': ' +
              (seriesData[params[0].dataIndex] !== null ?
                seriesData[params[0].dataIndex].toFixed(1) : '-')
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dayData.categories,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          min: yAxisConfig.min,
          max: yAxisConfig.max,
          axisLabel: {
            formatter: yAxisConfig.formatter,
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',
              type: 'dashed',
              width: 1
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: dataTypeConfig.text,
            type: 'line',
            data: seriesData,
            smooth: true,
            showSymbol: true,
            symbolSize: 6,
            lineStyle: {
              color: seriesColor,
              width: 3,
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            itemStyle: {
              color: seriesColor,
              borderWidth: 2,
              borderColor: '#fff'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: seriesColor + '40'
                },
                {
                  offset: 1,
                  color: seriesColor + '00'
                }
              ])
            }
          }
        ]
      }
      this.dayChart && this.dayChart.setOption(option)
    },
    updateWeekChart() {
      // 获取所选日期所在周的数据
      const selectedDate = new Date(this.currentDate)
      const dayOfWeek = selectedDate.getDay() // 0是周日，1-6是周一到周六
      const weekStart = new Date(selectedDate)
      const weekEnd = new Date(selectedDate)

      if (dayOfWeek === 0) { // 如果是周日
        weekStart.setDate(selectedDate.getDate() - 6) // 获取前6天
      } else {
        weekStart.setDate(selectedDate.getDate() - dayOfWeek + 1) // 获取本周一
        weekEnd.setDate(selectedDate.getDate() + (7 - dayOfWeek)) // 获取本周日
      }

      const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      const weekData = []
      const currentDate = new Date(weekStart)
      while (currentDate <= weekEnd) {
        const dateStr = this.formatDate(currentDate)
        const dayData = this.getDayData(dateStr)

        // 获取选中数据类型的日平均值
        const dataTypeConfig = this.dataTypes.find(type => type.value === this.selectedDataType)
        const seriesData = dayData.series.find(s => s.name === dataTypeConfig.text).data
        let avgValue = 0
        const validValues = seriesData.filter(v => v !== null)
        if (validValues.length > 0) {
          avgValue = validValues.reduce((sum, val) => sum + val, 0) / validValues.length
        }

        weekData.push({
          date: dateStr,
          weekDay: weekDays[currentDate.getDay() === 0 ? 6 : currentDate.getDay() - 1], // 转换为周一到周日的索引
          value: avgValue || 0
        })
        currentDate.setDate(currentDate.getDate() + 1)
      }

      const dataTypeConfig = this.dataTypes.find(type => type.value === this.selectedDataType)
      const yAxisConfig = this.getYAxisConfig(this.selectedDataType)
      const seriesColor = this.getSeriesColor(this.selectedDataType)

      const option = {
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDelay: (idx) => idx * 100,
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        animationDelayUpdate: (idx) => idx * 100,
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            const value = params[0].value || 0
            const item = weekData[params[0].dataIndex]
            return `${item.weekDay} ${item.date}<br/>${params[0].marker}${dataTypeConfig.text}: ${value ? value.toFixed(1) : '-'}`
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: weekData.map(item => `${item.weekDay}\n${item.date}`), // 显示星期和日期
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          min: yAxisConfig.min,
          max: yAxisConfig.max,
          axisLabel: {
            formatter: yAxisConfig.formatter,
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',
              type: 'dashed',
              width: 1
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: dataTypeConfig.text,
            type: 'line',
            data: weekData.map(item => item.value),
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: seriesColor,
              width: 3,
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            itemStyle: {
              color: seriesColor,
              borderWidth: 2,
              borderColor: '#fff',
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: seriesColor + '40'
                },
                {
                  offset: 1,
                  color: seriesColor + '00'
                }
              ])
            }
          }
        ]
      }

      this.weekChart && this.weekChart.setOption(option)
    },
    // 数据标准化处理
    normalizeData(data, min, max) {
      return data.map(value => ((value - min) / (max - min) * 100).toFixed(2))
    },
    initCharts() {
      // 使用this.$nextTick确保DOM已渲染完成
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this)

        // 初始化日数据图表
        query.select('#day-chart')
          .boundingClientRect(data => {
            if (data) {
              const dayChartDom = document.getElementById('day-chart')
              this.dayChart = echarts.init(dayChartDom)
              this.updateDayChart()
            }
          })
          .exec()

        // 初始化周数据图表
        query.select('#week-chart')
          .boundingClientRect(data => {
            if (data) {
              const weekChartDom = document.getElementById('week-chart')
              this.weekChart = echarts.init(weekChartDom)
              this.updateWeekChart()
            }
          })
          .exec()

        // 初始化月数据图表
        query.select('#month-chart')
          .boundingClientRect(data => {
            if (data) {
              const monthChartDom = document.getElementById('month-chart')
              this.monthChart = echarts.init(monthChartDom)
              this.updateMonthChart()
            }
          })
          .exec()
      })
    },
    onDateChange(date) {
      this.currentDate = date
      this.fetchSensorData() // 日期改变时重新获取数据
    },
    // 更新月度数据图表
    updateMonthChart() {
      // 获取最近12个月的数据
      const monthData = []
      for (let i = 11; i >= 0; i--) {
        const date = new Date()
        date.setMonth(date.getMonth() - i)
        const monthStr = this.formatDate(date).substring(0, 7) // 只取年月

        // 获取当月所有数据的平均值
        const monthlyData = this.sensorData.filter(item => {
          const itemDate = this.formatDate(new Date(item.timestamp)).substring(0, 7)
          return itemDate === monthStr
        })

        // 计算选中数据类型的月平均值
        const dataTypeConfig = this.dataTypes.find(type => type.value === this.selectedDataType)
        let avgValue = 0
        if (monthlyData.length > 0) {
          const values = monthlyData.map(item => Number(item[this.selectedDataType]))
          avgValue = values.reduce((sum, val) => sum + val, 0) / values.length
        }

        monthData.push({
          date: monthStr,
          value: avgValue
        })
      }

      const dataTypeConfig = this.dataTypes.find(type => type.value === this.selectedDataType)
      const yAxisConfig = this.getYAxisConfig(this.selectedDataType)
      const seriesColor = this.getSeriesColor(this.selectedDataType)

      const option = {
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDelay: (idx) => idx * 100,
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        animationDelayUpdate: (idx) => idx * 100,
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return params[0].axisValue + '<br/>' +
              params[0].marker + dataTypeConfig.text + ': ' +
              params[0].value.toFixed(1)
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: monthData.map(item => item.date),
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          min: yAxisConfig.min,
          max: yAxisConfig.max,
          axisLabel: {
            formatter: yAxisConfig.formatter,
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',
              type: 'dashed',
              width: 1
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: dataTypeConfig.text,
            type: 'line',
            data: monthData.map(item => item.value),
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: seriesColor,
              width: 2
            },
            itemStyle: {
              color: seriesColor,
              borderWidth: 2,
              borderColor: '#fff'
            }
          }
        ]
      }

      this.monthChart && this.monthChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.header-card,
.section-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  }
}

.header {
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;

  .header-left {
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 24rpx;

    .data-type-selector {
      width: 240rpx;
      ::v-deep .uni-data-select {
        .uni-select {
          padding: 0 12rpx;
          height: 64rpx;
          border: 1px solid #e5e7eb;
          border-radius: 8rpx;
          transition: all 0.3s;
          &:hover {
            border-color: #2979ff;
          }
          &.uni-select--opened {
            border-color: #2979ff;
          }
        }
        .uni-select__input-box {
          height: 100%;
          line-height: 64rpx;
          font-size: 28rpx;
          color: #333;
        }
        .uni-select__input-text {
          font-size: 28rpx;
          color: #333;
        }
        .uni-select__selector {
          border: 1px solid #e5e7eb;
          border-radius: 8rpx;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          .uni-select__selector-item {
            padding: 16rpx 24rpx;
            font-size: 28rpx;
            color: #333;
            transition: all 0.3s;
            &:hover {
              background-color: #f5f7f9;
            }
            &.active {
              color: #2979ff;
              background-color: #e6f4ff;
            }
          }
        }
      }
    }
  }
}

.date-picker {
  .picker-text {
    font-size: 26rpx;
    color: #666;
  }
}

.chart-container {
  height: 600rpx;
  margin: 20rpx 0;

  .echart {
    width: 100%;
    height: 100%;
  }
}

.more {
  color: #2979ff;
  font-size: 24rpx;
}

.notification-list {
  .notification-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;

    &:last-child {
      border-bottom: none;
    }

    .alert-icon {
      margin-right: 20rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      &.warning {
        background: #fff2e8;
        ::v-deep .uni-icons {
          color: #ff4d4f;
          font-size: 40rpx;
        }
      }

      &.error {
        background: #fff1f0;
        ::v-deep .uni-icons {
          color: #ff4d4f;
          font-size: 40rpx;
        }
      }

      &.info {
        background: #e6f4ff;
        ::v-deep .uni-icons {
          color: #2979ff;
          font-size: 40rpx;
        }
      }
    }

    .alert-content {
      flex: 1;
      padding-top: 6rpx;

      .alert-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;

        .alert-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }

        .alert-time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .alert-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}
</style>
